<template>
  <div class="container">
    <!-- 顶部 banner -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="data?.indexInfo?.index_top || []"
      :current="data.current"
      :dots-styles="data.dotsStyles"
      field="content">
      <swiper class="swiper-box" @change="change" :current="data.swiperDotIndex" autoplay>
        <swiper-item v-for="(item, index) in data?.indexInfo?.index_top || []" :key="index">
          <view class="swiper-item" :class="'swiper-item' + index" @click="() => handleBannerUrl(item)">
            <image :src="item.img" mode="aspectFill" class="top_banner"></image>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 热门活动  -->
    <view class="hot-activity" v-if="data.is_active.includes('1') && data.activeList.length > 0">
      <!-- 背景图 -->
      <image class="hot-activity-bg" :src="data?.indexInfo?.index_middle_img" mode="aspectFill"></image>
      <view class="content">
        <!-- 通知公告 -->
        <view
          class="notice"
          v-if="data.indexInfo?.information?.title"
          @click="() => jumpNewsDetail(data.indexInfo?.information)">
          <view class="flex-l">
            <view class="flex-l">
              <span>通知</span>
              <span class="gonggao">公告：</span>
            </view>
            <view class="text fs-26 flex-1 ellipsis-1">{{ data.indexInfo?.information?.title || '' }}</view>
          </view>
        </view>
        <!-- 热门活动 -->
        <!-- 标题 -->
        <image class="hot-activity-title" :src="data.index_title_info.active" mode="widthFix"></image>
        <!-- banner -->
        <view class="hot-banner-wrap">
          <swiper
            circular
            class="swiper-box"
            layout-type="transformer"
            transformer-type="scaleAndFade"
            previous-margin="30px"
            next-margin="30px"
            @change="change2"
            :current="data.current2">
            <swiper-item
              v-for="(item, index) in data.activeList"
              :key="index"
              @click="() => handleJump('activity/detail?active_id=' + item.id)"
              class="swiper-item">
              <image
                :src="item.img"
                mode="aspectFill"
                class="hot_banner"
                :style="`transform: ${index === data.current2 ? 'scale(1)' : 'scale(0.9)'}`"></image>
              <view
                class="hot-activity-text ellipsis-1"
                :style="`transform: ${index === data.current2 ? 'scale(1)' : 'scale(0.9)'}`">
                {{ item.title }}
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <!-- 热门新闻 -->
    <view class="hot-activity" v-if="data.is_active.includes('2') && data.newsList.length > 0">
      <!-- 背景图 -->
      <image class="hot-activity-bg" :src="data?.indexInfo?.index_middle_img" mode="aspectFill"></image>
      <view class="content">
        <!-- 通知公告 -->
        <view class="notice" @click="() => jumpNewsDetail(data.indexInfo?.information)">
          <view class="flex-l">
            <view class="flex-l">
              <span>通知</span>
              <span class="gonggao">公告：</span>
            </view>
            <view class="text fs-26 flex-1 ellipsis-1">{{ data.indexInfo?.information?.title || '' }}</view>
          </view>
        </view>
        <!-- 标题 -->
        <image class="hot-activity-title" :src="data.index_title_info.news" mode="widthFix"></image>
        <!-- banner -->
        <view class="hot-banner-wrap">
          <swiper
            circular
            class="swiper-box"
            layout-type="transformer"
            transformer-type="scaleAndFade"
            previous-margin="30px"
            next-margin="30px"
            @change="change3"
            :current="data.current3">
            <swiper-item
              v-for="(item, index) in data.newsList"
              :key="index"
              @click="() => jumpNewsDetail(item)"
              class="swiper-item">
              <image
                :src="item.img"
                mode="aspectFill"
                class="hot_banner"
                :style="`transform: ${index === data.current3 ? 'scale(1)' : 'scale(0.9)'}`"></image>
              <view
                class="hot-activity-text ellipsis-1"
                :style="`transform: ${index === data.current3 ? 'scale(1)' : 'scale(0.9)'}`">
                {{ item.title }}
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>

    <!-- 精彩瞬间 -->
    <view class="exciting-moments">
      <!-- 标题 -->
      <view class="title" @click="() => handleJump('other/moment-images/index')">
        <md-icon :url="data.index_title_info.moments" width="370" height="78" />
        <view class="more flex-l">
          更多
          <md-icon name="right" />
        </view>
      </view>
      <!-- 图片集 -->
      <view class="images">
        <view class="item" v-for="(item, index) in data.monents" :key="index" @click="() => handleMomentDetail(item)">
          <image class="img" :src="item.img" mode="aspectFill" />
          <view class="text ellipsis-1">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <!-- 合作信息 -->
    <view class="hezuo" v-if="data.imgTypeList.includes(data.indexInfo?.cooperate_img?.split('.')?.slice(-1)?.[0])">
      <md-icon :url="data.indexInfo.cooperate_img" width="750" height="867" mode="widthFix">
        <!-- 标题 -->
        <view class="title">
          <md-icon :url="data.index_title_info.cooperation" width="370" height="78" mode="widthFix" />
        </view>
      </md-icon>
    </view>

    <view class="logo-wrap">
      <md-logo hasText :logo="data?.indexInfo?.logo" :text="data?.indexInfo?.support" />
    </view>

    <!-- 底部导航 -->
    <bottom-tab-bar ref="bottomTabBar" :selected="0" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { onShareAppMessage, onShow } from '@dcloudio/uni-app';
// 接口
import { activeIndex, index, moments, newsIndex } from '@/api/index';
import type { Index, Information } from '@/api/data';

const data = reactive<any>({
  index_title_info: {}, // 标题图片
  modeIndex: -1,
  styleIndex: -1,
  current: 0,
  current2: 0,
  current3: 0,
  mode: 'default',
  dotsStyles: {
    bottom: 15,
    selectedBackgroundColor: '#55C4BD',
  },
  swiperDotIndex: 0,
  is_active: [], // 是否显示：1活动, 2新闻
  activeList: [], // 热门活动
  newsList: [], // 热门新闻
  monents: [], // 精彩瞬间
  imgTypeList: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'],
});
const bottomTabBar = ref<any>(null);

// 跳转资讯详情
const jumpNewsDetail = (item?: Information.Index.Data) => {
  // 跳公众号
  if (item?.is_link == 1) {
    uni.navigateTo({
      url: '/pages/other/webview/index?url=' + encodeURIComponent(item.link),
    });
  } else {
    uni.navigateTo({
      url: '/pages/news/detail?id=' + data.indexInfo?.information?.id,
    });
  }
};

// 精彩瞬间跳转链接
const handleMomentDetail = (item: Index.Moments.Data) => {
  let url = '';
  // link_type 1 跳公众号 2 跳详情
  if (item.link_type === 1) {
    url = '/pages/other/webview/index?url=' + encodeURIComponent(item.link);
  } else {
    url = `/pages/other/moment-images/detail?id=${item.id}&title=${item.title}`;
  }
  uni.navigateTo({ url });
};

const change = (e: any) => {
  data.current = e.detail.current;
};

const change2 = (e: any) => {
  data.current2 = e.detail.current;
};

const change3 = (e: any) => {
  data.current3 = e.detail.current;
};

const clickItem = (e: any) => {
  data.swiperDotIndex = e;
};

// banner跳转
const handleBannerUrl = (item: Index.Home.Index_top) => {
  // 跳转视频号
  // uni.getChannelsLiveInfo({
  //   finderUserName: 'sphWmY4nml0oof6',
  // });
  if (item?.link) {
    //  1：网址 2：小程序
    if (item.link_type == 1) {
      uni.navigateTo({ url: '/pages/other/webview/index?url=' + encodeURIComponent(item.link) });
    } else {
      // 打开小程序
      uni.navigateToMiniProgram({
        appId: '',
        path: item.link,
      });
    }
  }
};

// 精彩瞬间跳转
const handleJump = (pageUrl: string) => {
  uni.navigateTo({
    url: `/pages/${pageUrl}`,
  });
};

/**
 * 接口相关
 */
// 首页信息
const fetchIndex = async () => {
  try {
    const res = await index();
    data.indexInfo = res.data;
    if (res.data?.is_active) {
      const is_active = res.data.is_active;
      data.is_active = is_active;
      // 热门活动
      if (is_active.includes('1')) {
        fetchActiveIndex();
      }
      // 热门新闻
      if (is_active.includes('2')) {
        fetchNewsIndex();
      }
    }
    return true;
  } catch (error) {}
  return false;
};

// 热门活动
const fetchActiveIndex = async () => {
  try {
    const res = await activeIndex({ page: 1, limit: 5 });
    data.activeList = res?.data?.data || [];
    return true;
  } catch (error) {}
  return false;
};

// 热门新闻
const fetchNewsIndex = async () => {
  try {
    const res = await newsIndex({ page: 1, limit: 5 });
    data.newsList = res?.data?.data || [];
    return true;
  } catch (error) {}
  return false;
};

// 精彩瞬间
const fetchMoments = async () => {
  try {
    const res = await moments({ page: 1, limit: 5 });
    data.monents = res?.data?.data || [];
    return true;
  } catch (error) {}
  return false;
};

onShow(() => {
  uni.showLoading({
    title: '加载中',
  });
  Promise.all([fetchIndex(), fetchMoments()]).finally(() => {
    uni.hideLoading();
  });
});

onMounted(async () => {
  bottomTabBar.value!.fetchCommonConfig();
  const info = await bottomTabBar.value!.getBottomTab();
  data.index_title_info = {
    news: info?.index_new,
    active: info?.index_active,
    cooperation: info?.index_cooperation,
    moments: info?.index_moment,
  };
});

// 分享钩子
onShareAppMessage(res => {
  return {
    title: '首页',
    path: '/pages/index/index',
  };
});
</script>
<style lang="scss" scoped>
.container {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.change-bg {
  width: 100rpx;
  height: 50rpx;
  background-color: var(--theme-color);
}

// 头部banner
.swiper-box {
  height: 880rpx;
  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
  }
}
.top_banner {
  width: 100%;
  height: 880rpx;
}

// 热门活动
.hot-activity {
  width: 100%;
  position: relative;
  &-title {
    width: 370rpx;
    height: 78rpx;
    display: block;
    margin: 0 auto;
  }
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20rpx 20rpx 0 0;
    z-index: -1;
  }
  .content {
    width: 100%;
    padding: 20rpx 0;
    box-sizing: border-box;
    .notice {
      width: 690rpx;
      height: 80rpx;
      background: #f7f7f7;
      border-radius: 20rpx;
      margin: 10rpx auto 30rpx;
      font-size: 34rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding: 0 26rpx;
      box-sizing: border-box;
      .gonggao {
        color: #ff9237;
      }
      .text {
        color: #1c1c1c;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;
      }
    }
    .hot-banner-wrap {
      .swiper-box {
        margin: 0 auto;
        height: 300rpx;
        .swiper-item {
          border-radius: 20rpx;
          overflow: hidden;
        }
        .hot_banner {
          width: 100%;
          height: 300rpx;
          transition: all 0.5s;
        }
      }
      .swiper-title {
        padding: 0 65rpx;
        position: absolute;
        bottom: 130rpx;
        left: 0;
        right: 0;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 32rpx;
      }
      .hot-activity-text {
        width: 100%;
        height: 52rpx;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        color: white;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 精彩瞬间
.exciting-moments {
  padding-top: 40rpx;
  height: 500rpx;
  background: white;
  .title {
    width: 100%;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #808080;
    .more {
      position: absolute;
      right: 30rpx;
      top: 0;
    }
  }
  .images {
    padding: 45rpx 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      position: relative;
      margin-bottom: 16rpx;
      border-radius: 20rpx;
      overflow: hidden;
      &:nth-of-type(1) {
        width: 335rpx;
        height: 190rpx;
      }
      &:nth-of-type(2) {
        width: 335rpx;
        height: 190rpx;
      }
      &:nth-of-type(3) {
        width: 224rpx;
        height: 150rpx;
      }
      &:nth-of-type(4) {
        width: 224rpx;
        height: 150rpx;
      }
      &:nth-of-type(5) {
        width: 224rpx;
        height: 150rpx;
      }
      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6rpx;
        box-sizing: border-box;
      }
    }
  }
}

.logo-wrap {
  margin: 45rpx auto 25rpx;
}

// 合作信息
.hezuo {
  .title {
    margin-top: 42rpx;
    display: flex;
    justify-content: center;
  }
}
</style>
